<!--
 * @Author: wwssaabb
 * @Date: 2021-09-18 14:20:47
 * @LastEditTime: 2021-10-08 08:41:58
 * @FilePath: \CloudMusic-for-Vue3\src\views\DjRadio.vue
-->
<template>
  <div class="dj_radio-page">
    <CategoryList :list="data.categories" :choose="data.chooseCategory" :click="categoryClick"></CategoryList>
    <RouterView></RouterView>
  </div>
</template>

<script setup lang="ts">
import CategoryList from "../../../components/DjRadio/categoryList.vue";
import {
  reqDjCategories,
} from "../../../api";
import {
  DjCategoryType,
} from "../../../types/types";
import { ref, onMounted, watch } from "vue";
import { RouterView, useRouter } from "vue-router"

const router = useRouter()
router.afterEach((to, from) => {
  console.log(to, from)
  if (to.path === '/discover/djradio/category' && to.query.id) data.value.chooseCategory = parseInt(to.query.id.toString())
  if (to.path === '/discover/djradio') data.value.chooseCategory = 0
})

let id = 0
if (router.currentRoute.value.query.id) {
  id = parseInt(router.currentRoute.value.query.id.toString())
}

//获取选中的category

type dataType = {
  chooseCategory: number,
  categories: DjCategoryType[];
};
const data = ref<dataType>({
  chooseCategory: id,
  categories: [],
});

const getCategory = async () => {
  //获取分类
  let res = await reqDjCategories();
  data.value.categories = res.categories;
  console.log(res)
};

//分类点击回调事件
const categoryClick = (id: number) => {
  data.value.chooseCategory = id
  router.push('/discover/djradio/category?id=' + id)
}


onMounted(async () => {
  //获取电台分类
  getCategory();

});

watch(() => data.value.chooseCategory, () => {
  console.log('chooseCategory is change')
})

console.log(data.value);
</script>

<style lang="scss" scoped>
$--fixed_width: 982px;
.dj_radio-page {
  width: $--fixed_width;
  min-height: calc(100vh - 280px);
  padding: 40px 40px;
  background: #fff;
  border-left: 1px solid #d3d3d3;
  border-right: 1px solid #d3d3d3;
}
</style>
